迴圈著色

v-for

• v-for指令可以將一個陣列中的資料著色成清單式圖。
• 使用時，需設定一種特殊語法：

Item in list

• in 為語法關鍵字，也可以替換為of，在v-for指令中item是一個臨時變數，它是清單中被迭代出的元素名稱，而list則是清單變數本身。
  
• 執行以上這段程式，可以看到網頁中正常著色出了5個div元件，如下：
  
• 若我們需要著色的資料都是物件資料，使用物件來對清單元素進行填充，例如定義聯絡人物件清單：
  
• 顯示結果如下
  
• 在v-for指令中，也可以獲取到當前遍歷項的索引，程式如下：

<ul>
    <li v-for="(item,index) in list">
        <div>{{index + "." + item.name}}</div>
        <div>{{item.num}}</div>
</ul>

• 另外我們也可以對物件進行遍歷
  
• 指令中的第1個參數為遍歷的物件中屬性的值，第2個參數則是名稱，第3個是索引，最後使用有序清單來承載list物件的資料，結果如下：
  

今天的介紹就先到這邊，明天會介紹的是v-for的進階用法！